<template>
  <div class="application-process">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/transcendence-application">超度申请管理</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>超度申请流程</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">超度申请流程</div>
        <div class="page-subtitle">管理超度申请的提交、审核和处理流程</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="handleCreateApplication">
          <PlusOutlined />
          新建申请
        </a-button>
      </div>
    </div>

    <!-- 流程统计 -->
    <div class="process-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <FormOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ processStats.submitted }}</div>
              <div class="stat-label">今日提交</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ processStats.pending }}</div>
              <div class="stat-label">待审核</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ processStats.approved }}</div>
              <div class="stat-label">已通过</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <CloseCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ processStats.rejected }}</div>
              <div class="stat-label">已拒绝</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 申请流程列表 -->
    <div class="process-list">
      <div class="list-header">
        <h3>申请流程管理</h3>
        <div class="header-actions">
          <a-input-search placeholder="搜索申请人或亡魂姓名" style="width: 300px" @search="handleSearch" />
          <a-select v-model:value="statusFilter" placeholder="状态筛选" style="width: 120px; margin-left: 12px" @change="handleFilterChange">
            <a-select-option value="">全部状态</a-select-option>
            <a-select-option value="待审核">待审核</a-select-option>
            <a-select-option value="已批准">已批准</a-select-option>
            <a-select-option value="已拒绝">已拒绝</a-select-option>
          </a-select>
        </div>
      </div>

      <a-table :columns="columns" :data-source="filteredApplications" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'progress'">
            <a-progress :percent="record.progress" size="small" :stroke-color="getProgressColor(record.progress)" />
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="viewDetail(record)"> 查看详情 </a-button>
              <a-button type="link" size="small" @click="processApplication(record)"> 处理申请 </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 新建申请模态框 -->
    <a-modal v-model:open="showCreateModal" title="新建超度申请" width="800px" @ok="submitApplication" :confirmLoading="saving">
      <a-form :model="applicationForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="亡魂姓名" required>
              <a-input v-model:value="applicationForm.deceasedName" placeholder="请输入亡魂姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="申请人姓名" required>
              <a-input v-model:value="applicationForm.applicantName" placeholder="请输入申请人姓名" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="申请人与亡魂关系" required>
              <a-select v-model:value="applicationForm.relationship" placeholder="请选择关系">
                <a-select-option value="子女">子女</a-select-option>
                <a-select-option value="配偶">配偶</a-select-option>
                <a-select-option value="父母">父母</a-select-option>
                <a-select-option value="兄弟姐妹">兄弟姐妹</a-select-option>
                <a-select-option value="其他亲属">其他亲属</a-select-option>
                <a-select-option value="朋友">朋友</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="超度类型" required>
              <a-select v-model:value="applicationForm.transcendenceType" placeholder="请选择超度类型">
                <a-select-option value="普通超度">普通超度</a-select-option>
                <a-select-option value="紧急超度">紧急超度</a-select-option>
                <a-select-option value="特殊超度">特殊超度</a-select-option>
                <a-select-option value="集体超度">集体超度</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="亡魂生前姓名">
              <a-input v-model:value="applicationForm.originalName" placeholder="若与现姓名不同请填写" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="死亡时间">
              <a-date-picker v-model:value="applicationForm.deathDate" style="width: 100%" placeholder="请选择死亡时间" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="联系电话" required>
              <a-input v-model:value="applicationForm.phone" placeholder="请输入联系电话" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="紧急程度">
              <a-select v-model:value="applicationForm.urgency" placeholder="请选择紧急程度">
                <a-select-option value="一般">一般</a-select-option>
                <a-select-option value="紧急">紧急</a-select-option>
                <a-select-option value="特急">特急</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="死因说明">
          <a-textarea v-model:value="applicationForm.causeOfDeath" :rows="3" placeholder="请简要说明死因" />
        </a-form-item>

        <a-form-item label="申请原因" required>
          <a-textarea v-model:value="applicationForm.reason" :rows="4" placeholder="请详细说明申请超度的原因和亡魂的情况" />
        </a-form-item>

        <a-form-item label="特殊要求">
          <a-textarea v-model:value="applicationForm.specialRequirements" :rows="2" placeholder="如有特殊要求请说明" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 查看详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="申请详情" width="1000px" :footer="null">
      <div class="application-detail" v-if="selectedApplication">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card class="detail-card">
              <h4>基本信息</h4>
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="申请编号">{{ selectedApplication.id }}</a-descriptions-item>
                <a-descriptions-item label="亡魂姓名">{{ selectedApplication.deceasedName }}</a-descriptions-item>
                <a-descriptions-item label="申请人">{{ selectedApplication.applicantName }}</a-descriptions-item>
                <a-descriptions-item label="关系">{{ selectedApplication.relationship }}</a-descriptions-item>
                <a-descriptions-item label="超度类型">
                  <a-tag :color="getTypeColor(selectedApplication.transcendenceType)">
                    {{ selectedApplication.transcendenceType }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="申请时间">{{ selectedApplication.applicationTime }}</a-descriptions-item>
                <a-descriptions-item label="当前状态">
                  <a-tag :color="getStatusColor(selectedApplication.status)">
                    {{ selectedApplication.status }}
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>

          <a-col :span="16">
            <a-card class="detail-card">
              <h4>详细信息</h4>
              <a-descriptions :column="2" size="small">
                <a-descriptions-item label="生前姓名">{{ selectedApplication.originalName || '与现姓名相同' }}</a-descriptions-item>
                <a-descriptions-item label="死亡时间">{{ selectedApplication.deathDate }}</a-descriptions-item>
                <a-descriptions-item label="联系电话">{{ selectedApplication.phone }}</a-descriptions-item>
                <a-descriptions-item label="紧急程度">
                  <a-tag :color="getUrgencyColor(selectedApplication.urgency)">
                    {{ selectedApplication.urgency }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="死因说明" :span="2">{{ selectedApplication.causeOfDeath || '未填写' }}</a-descriptions-item>
                <a-descriptions-item label="申请原因" :span="2">{{ selectedApplication.reason }}</a-descriptions-item>
                <a-descriptions-item label="特殊要求" :span="2">{{ selectedApplication.specialRequirements || '无特殊要求' }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>
        </a-row>

        <a-card class="detail-card" style="margin-top: 16px">
          <h4>处理进度</h4>
          <a-steps :current="getCurrentStep(selectedApplication.status)" size="small">
            <a-step title="申请提交" description="用户提交超度申请" />
            <a-step title="资格审核" description="审核申请人资格和材料" />
            <a-step title="仪式安排" description="安排超度仪式时间地点" />
            <a-step title="仪式执行" description="执行超度仪式" />
            <a-step title="效果评估" description="评估超度效果" />
            <a-step title="完成归档" description="流程完成并归档" />
          </a-steps>
        </a-card>

        <a-card class="detail-card" style="margin-top: 16px" v-if="selectedApplication.processHistory">
          <h4>处理历史</h4>
          <a-timeline>
            <a-timeline-item v-for="item in selectedApplication.processHistory" :key="item.id" :color="getTimelineColor(item.type)">
              <template #dot>
                <component :is="getTimelineIcon(item.type)" />
              </template>
              <div class="timeline-content">
                <div class="timeline-title">{{ item.title }}</div>
                <div class="timeline-description">{{ item.description }}</div>
                <div class="timeline-time">{{ item.time }} - {{ item.operator }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </div>
    </a-modal>

    <!-- 处理申请模态框 -->
    <a-modal v-model:open="showProcessModal" title="处理申请" width="600px" @ok="submitProcess" :confirmLoading="saving">
      <a-form :model="processForm" layout="vertical" v-if="selectedApplication">
        <a-form-item label="申请信息">
          <a-input :value="`${selectedApplication.deceasedName} - ${selectedApplication.applicantName}`" disabled />
        </a-form-item>

        <a-form-item label="当前状态">
          <a-input :value="selectedApplication.status" disabled />
        </a-form-item>

        <a-form-item label="处理动作" required>
          <a-select v-model:value="processForm.action" placeholder="请选择处理动作">
            <a-select-option value="approve">批准申请</a-select-option>
            <a-select-option value="reject">拒绝申请</a-select-option>
            <a-select-option value="request_supplement">要求补充材料</a-select-option>
            <a-select-option value="forward_review">转交审核</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="处理说明" required>
          <a-textarea v-model:value="processForm.comment" :rows="4" placeholder="请输入处理说明和意见" />
        </a-form-item>

        <a-form-item label="下一步处理人" v-if="processForm.action === 'forward_review'">
          <a-select v-model:value="processForm.nextHandler" placeholder="选择下一步处理人">
            <a-select-option value="reviewer1">高级审核员A</a-select-option>
            <a-select-option value="reviewer2">高级审核员B</a-select-option>
            <a-select-option value="manager">部门主管</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="预计处理时间" v-if="processForm.action === 'approve'">
          <a-date-picker v-model:value="processForm.expectedTime" style="width: 100%" placeholder="选择预计完成时间" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useSalvationStore } from '@/stores/salvation'
import { PlusOutlined, FormOutlined, ClockCircleOutlined, CheckCircleOutlined, CloseCircleOutlined, UserOutlined, AuditOutlined, SettingOutlined, FileTextOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const salvationStore = useSalvationStore()

// 模态框状态
const showCreateModal = ref(false)
const showDetailModal = ref(false)
const showProcessModal = ref(false)
const saving = ref(false)
const selectedApplication = ref(null)

// 流程统计数据
const processStats = ref({
  submitted: 8,
  pending: 23,
  approved: 15,
  rejected: 3
})

// 表单数据
const applicationForm = ref({
  deceasedName: '',
  applicantName: '',
  relationship: '',
  transcendenceType: '',
  originalName: '',
  deathDate: null,
  phone: '',
  urgency: '一般',
  causeOfDeath: '',
  reason: '',
  specialRequirements: ''
})

const processForm = ref({
  action: '',
  comment: '',
  nextHandler: '',
  expectedTime: null
})

// 筛选条件
const statusFilter = ref('')
const searchKeyword = ref('')

// 模拟申请数据
const applicationData = ref([
  {
    id: 'TA001',
    deceasedName: '王老太',
    applicantName: '王小明',
    relationship: '子女',
    transcendenceType: '普通超度',
    originalName: '',
    deathDate: '2024-01-10',
    phone: '138****5678',
    urgency: '一般',
    causeOfDeath: '因病去世，享年85岁',
    reason: '老人生前心存执念，希望通过超度仪式帮助其超脱轮回，获得安息。',
    specialRequirements: '希望使用传统仪式',
    applicationTime: '2024-01-15 09:30:00',
    status: '待审核',
    progress: 25,
    processHistory: [
      {
        id: 1,
        type: 'submit',
        title: '申请提交',
        description: '用户提交超度申请，等待审核',
        time: '2024-01-15 09:30:00',
        operator: '王小明'
      }
    ]
  },
  {
    id: 'TA002',
    deceasedName: '李大爷',
    applicantName: '李华',
    relationship: '子女',
    transcendenceType: '紧急超度',
    originalName: '',
    deathDate: '2024-01-14',
    phone: '139****2345',
    urgency: '紧急',
    causeOfDeath: '意外事故',
    reason: '父亲因意外离世，家属希望尽快安排超度仪式。',
    specialRequirements: '需要加急处理',
    applicationTime: '2024-01-14 16:20:00',
    status: '已批准',
    progress: 75,
    processHistory: [
      {
        id: 1,
        type: 'submit',
        title: '申请提交',
        description: '用户提交超度申请，等待审核',
        time: '2024-01-14 16:20:00',
        operator: '李华'
      },
      {
        id: 2,
        type: 'approve',
        title: '审核通过',
        description: '申请已通过初步审核，进入仪式安排阶段',
        time: '2024-01-14 18:00:00',
        operator: '审核员A'
      },
      {
        id: 3,
        type: 'arrange',
        title: '仪式安排',
        description: '已安排超度仪式时间和地点',
        time: '2024-01-15 10:00:00',
        operator: '仪式安排员'
      }
    ]
  },
  {
    id: 'TA003',
    deceasedName: '张奶奶',
    applicantName: '张小红',
    relationship: '孙女',
    transcendenceType: '特殊超度',
    originalName: '张翠花',
    deathDate: '2024-01-12',
    phone: '137****8901',
    urgency: '一般',
    causeOfDeath: '自然死亡',
    reason: '奶奶生前信佛，希望按照佛教仪式超度。',
    specialRequirements: '需要佛教超度仪式',
    applicationTime: '2024-01-13 14:15:00',
    status: '已拒绝',
    progress: 0,
    processHistory: [
      {
        id: 1,
        type: 'submit',
        title: '申请提交',
        description: '用户提交超度申请，等待审核',
        time: '2024-01-13 14:15:00',
        operator: '张小红'
      },
      {
        id: 2,
        type: 'reject',
        title: '审核拒绝',
        description: '资料不完整，需要补充相关证明材料',
        time: '2024-01-13 16:30:00',
        operator: '审核员B'
      }
    ]
  },
  {
    id: 'TA004',
    deceasedName: '陈老师',
    applicantName: '陈小军',
    relationship: '子女',
    transcendenceType: '普通超度',
    originalName: '',
    deathDate: '2024-01-11',
    phone: '136****7890',
    urgency: '一般',
    causeOfDeath: '重病去世',
    reason: '父亲是一名退休教师，希望通过超度帮助其灵魂得到安息。',
    specialRequirements: '',
    applicationTime: '2024-01-12 11:45:00',
    status: '仪式完成',
    progress: 100,
    processHistory: [
      {
        id: 1,
        type: 'submit',
        title: '申请提交',
        description: '用户提交超度申请，等待审核',
        time: '2024-01-12 11:45:00',
        operator: '陈小军'
      },
      {
        id: 2,
        type: 'approve',
        title: '审核通过',
        description: '申请已通过审核',
        time: '2024-01-12 15:00:00',
        operator: '审核员A'
      },
      {
        id: 3,
        type: 'arrange',
        title: '仪式安排',
        description: '已安排超度仪式',
        time: '2024-01-13 09:00:00',
        operator: '仪式安排员'
      },
      {
        id: 4,
        type: 'complete',
        title: '仪式完成',
        description: '超度仪式已成功完成',
        time: '2024-01-14 15:00:00',
        operator: '主持法师'
      }
    ]
  }
])

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`
})

// 表格列配置
const columns = [
  {
    title: '申请编号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '亡魂姓名',
    dataIndex: 'deceasedName',
    key: 'deceasedName',
    width: 120
  },
  {
    title: '申请人',
    dataIndex: 'applicantName',
    key: 'applicantName',
    width: 120
  },
  {
    title: '申请类型',
    dataIndex: 'transcendenceType',
    key: 'transcendenceType',
    width: 120
  },
  {
    title: '申请时间',
    dataIndex: 'applicationTime',
    key: 'applicationTime',
    width: 160
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '进度',
    dataIndex: 'progress',
    key: 'progress',
    width: 120
  },
  {
    title: '操作',
    key: 'actions',
    width: 160
  }
]

// 过滤后的申请列表
const filteredApplications = computed(() => {
  let result = applicationData.value

  // 状态筛选
  if (statusFilter.value) {
    result = result.filter((app) => app.status === statusFilter.value)
  }

  // 关键词搜索
  if (searchKeyword.value) {
    result = result.filter((app) => app.deceasedName.includes(searchKeyword.value) || app.applicantName.includes(searchKeyword.value))
  }

  pagination.value.total = result.length
  return result
})

// 搜索处理
const handleSearch = (value) => {
  searchKeyword.value = value
}

// 筛选变更处理
const handleFilterChange = () => {
  pagination.value.current = 1
}

// 重置表单
const resetApplicationForm = () => {
  applicationForm.value = {
    deceasedName: '',
    applicantName: '',
    relationship: '',
    transcendenceType: '',
    originalName: '',
    deathDate: null,
    phone: '',
    urgency: '一般',
    causeOfDeath: '',
    reason: '',
    specialRequirements: ''
  }
}

const resetProcessForm = () => {
  processForm.value = {
    action: '',
    comment: '',
    nextHandler: '',
    expectedTime: null
  }
}

// 新建申请
const handleCreateApplication = () => {
  resetApplicationForm()
  showCreateModal.value = true
}

// 提交申请
const submitApplication = async () => {
  if (!applicationForm.value.deceasedName || !applicationForm.value.applicantName || !applicationForm.value.relationship || !applicationForm.value.transcendenceType || !applicationForm.value.phone || !applicationForm.value.reason) {
    message.error('请填写所有必填信息')
    return
  }

  saving.value = true
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 1000))

    const newApplication = {
      id: `TA${String(applicationData.value.length + 1).padStart(3, '0')}`,
      ...applicationForm.value,
      deathDate: applicationForm.value.deathDate ? dayjs(applicationForm.value.deathDate).format('YYYY-MM-DD') : '',
      applicationTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      status: '待审核',
      progress: 25,
      processHistory: [
        {
          id: 1,
          type: 'submit',
          title: '申请提交',
          description: '用户提交超度申请，等待审核',
          time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          operator: applicationForm.value.applicantName
        }
      ]
    }

    applicationData.value.unshift(newApplication)
    processStats.value.submitted += 1
    processStats.value.pending += 1

    message.success('申请提交成功')
    showCreateModal.value = false
    resetApplicationForm()
  } catch (error) {
    message.error('申请提交失败，请重试')
  } finally {
    saving.value = false
  }
}

// 查看详情
const viewDetail = (record) => {
  selectedApplication.value = record
  showDetailModal.value = true
}

// 处理申请
const processApplication = (record) => {
  selectedApplication.value = record
  resetProcessForm()
  showProcessModal.value = true
}

// 提交处理
const submitProcess = async () => {
  if (!processForm.value.action || !processForm.value.comment) {
    message.error('请填写处理动作和说明')
    return
  }

  saving.value = true
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    const index = applicationData.value.findIndex((item) => item.id === selectedApplication.value.id)
    if (index !== -1) {
      const actionMap = {
        approve: { status: '已批准', progress: 50 },
        reject: { status: '已拒绝', progress: 0 },
        request_supplement: { status: '待补充', progress: 10 },
        forward_review: { status: '审核中', progress: 30 }
      }

      const actionResult = actionMap[processForm.value.action]

      applicationData.value[index] = {
        ...applicationData.value[index],
        status: actionResult.status,
        progress: actionResult.progress
      }

      // 添加处理历史
      applicationData.value[index].processHistory.push({
        id: applicationData.value[index].processHistory.length + 1,
        type: processForm.value.action,
        title: getActionTitle(processForm.value.action),
        description: processForm.value.comment,
        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        operator: '当前用户'
      })
    }

    message.success('处理完成')
    showProcessModal.value = false
    resetProcessForm()
  } catch (error) {
    message.error('处理失败，请重试')
  } finally {
    saving.value = false
  }
}

// 获取操作标题
const getActionTitle = (action) => {
  const titles = {
    approve: '审核通过',
    reject: '审核拒绝',
    request_supplement: '要求补充',
    forward_review: '转交审核'
  }
  return titles[action] || '处理完成'
}

// 获取当前步骤
const getCurrentStep = (status) => {
  const stepMap = {
    待审核: 0,
    审核中: 1,
    待补充: 0,
    已拒绝: 0,
    已批准: 1,
    仪式安排中: 2,
    仪式进行中: 3,
    仪式完成: 4,
    效果评估中: 4,
    已完成: 5
  }
  return stepMap[status] || 0
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    待审核: 'orange',
    审核中: 'blue',
    待补充: 'purple',
    已批准: 'green',
    已拒绝: 'red',
    仪式安排中: 'cyan',
    仪式进行中: 'processing',
    仪式完成: 'blue',
    效果评估中: 'purple',
    已完成: 'success'
  }
  return colors[status] || 'default'
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colors = {
    普通超度: 'blue',
    紧急超度: 'red',
    特殊超度: 'purple',
    集体超度: 'green'
  }
  return colors[type] || 'default'
}

// 获取紧急程度颜色
const getUrgencyColor = (urgency) => {
  const colors = {
    一般: 'default',
    紧急: 'orange',
    特急: 'red'
  }
  return colors[urgency] || 'default'
}

// 获取时间轴颜色
const getTimelineColor = (type) => {
  const colors = {
    submit: 'blue',
    approve: 'green',
    reject: 'red',
    arrange: 'purple',
    complete: 'success',
    request_supplement: 'orange',
    forward_review: 'cyan'
  }
  return colors[type] || 'blue'
}

// 获取时间轴图标
const getTimelineIcon = (type) => {
  const icons = {
    submit: FormOutlined,
    approve: CheckCircleOutlined,
    reject: CloseCircleOutlined,
    arrange: SettingOutlined,
    complete: CheckCircleOutlined,
    request_supplement: FileTextOutlined,
    forward_review: AuditOutlined
  }
  return icons[type] || UserOutlined
}

// 获取进度条颜色
const getProgressColor = (progress) => {
  if (progress >= 80) return '#52c41a'
  if (progress >= 60) return '#1890ff'
  if (progress >= 40) return '#faad14'
  return '#f5222d'
}

onMounted(() => {
  console.log('超度申请流程页面已加载')
})
</script>

<style lang="scss" scoped>
.application-process {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }
  }

  // 流程统计
  .process-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      .stat-content {
        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }
    }
  }

  // 申请流程列表
  .process-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        margin: 0;
        color: #fff;
        font-size: 1.2rem;
      }

      .header-actions {
        display: flex;
        align-items: center;
      }
    }

    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .ant-table-tbody > tr > td {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }

  // 模态框样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #1a1a2e;
        font-weight: 600;
        font-size: 18px;
      }
    }

    .ant-modal-body {
      background: transparent;
      color: #1a1a2e;
    }

    .ant-modal-footer {
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  // 表单样式
  :deep(.ant-form) {
    .ant-form-item-label > label {
      color: #1a1a2e;
      font-weight: 500;
    }

    .ant-input,
    .ant-input-number,
    .ant-select-selector,
    .ant-picker,
    .ant-textarea {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 8px;
      color: #1a1a2e;

      &:hover {
        border-color: #ffd700;
      }

      &:focus,
      &.ant-input-focused,
      &.ant-picker-focused,
      &.ant-select-focused {
        border-color: #ffd700;
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
      }
    }

    .ant-select-arrow {
      color: #1a1a2e;
    }
  }

  // 详情模态框样式
  .application-detail {
    .detail-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 12px;
      margin-bottom: 16px;

      h4 {
        color: #1a1a2e;
        font-weight: 600;
        margin-bottom: 16px;
        font-size: 16px;
      }
    }

    .timeline-content {
      .timeline-title {
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 4px;
      }

      .timeline-description {
        color: #666;
        margin-bottom: 4px;
        line-height: 1.5;
      }

      .timeline-time {
        color: #999;
        font-size: 12px;
      }
    }
  }

  // 描述列表样式
  :deep(.ant-descriptions) {
    .ant-descriptions-item-label {
      color: #1a1a2e;
      font-weight: 500;
    }

    .ant-descriptions-item-content {
      color: #1a1a2e;
    }
  }

  // 步骤条样式
  :deep(.ant-steps) {
    .ant-steps-item-title {
      color: #1a1a2e;
      font-weight: 500;
    }

    .ant-steps-item-description {
      color: #666;
    }
  }

  // 时间轴样式
  :deep(.ant-timeline) {
    .ant-timeline-item-content {
      color: #1a1a2e;
    }
  }

  // 按钮样式
  :deep(.ant-btn) {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;

    &.ant-btn-primary {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
      border-color: #ffd700;
      color: #1a1a2e;

      &:hover {
        background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
      }
    }
    &.ant-btn-default {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: #1a1a2e;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: #ffd700;
        color: #1a1a2e;
      }
    }
  }

  // 标签样式
  :deep(.ant-tag) {
    border-radius: 6px;
    font-weight: 500;
    border: none;
    padding: 2px 8px;
  }

  // 分页样式
  :deep(.ant-pagination) {
    .ant-pagination-item {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      a {
        color: rgba(255, 255, 255, 0.85);
      }

      &.ant-pagination-item-active {
        background: #ffd700;
        border-color: #ffd700;

        a {
          color: #1a1a2e;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      .ant-pagination-item-link {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .application-process {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }

    .process-list .list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .application-detail {
      .ant-row {
        flex-direction: column;

        .ant-col {
          width: 100%;
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>
